<template>
  <div>
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="80px"
      :inline="false"
      size="normal"
    >
      <el-form-item label="上传ICON" prop="icon">
        <el-upload
          accept="image/jpeg,image/png,image/jpg"
          :before-upload="beforeUpload"
          class="avatar-uploader"
          :action="action"
          :show-file-list="false"
          name="file"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="form.icon" :src="form.icon" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据滚动 -->
    <countTo :startVal='startVal' :endVal='endVal' :duration='3000' class='countToStyle'></countTo>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
export default {
  components: { countTo },
  data () {
    return {
      startVal: 0,
      endVal: 2017,
      action: 'https://jsonplaceholder.typicode.com/posts/',
      form: { icon: '' },
      dialogVisible: false,
      rules: {
        icon: [{ required: true, message: '请选择图片', trigger: 'blur' }]
      }
    }
  },
  methods: {
    beforeUpload (file) {
      // const isJPG = (file.type).indexOf("image/") == -1 ? false : true;
      var site = ['image/jpg', 'image/jpeg', 'image/png']
      const isJPG = site.includes(file.type)
      const isLt500KB = file.size / 1024 / 1024 < 0.5

      if (!isJPG) {
        this.$message.error('请选择png jpg jpeg图片上传')
      }

      if (!isLt500KB) {
        this.$message.error('上传图片只能是500KB以内!')
      }

      return isJPG && isLt500KB
    },
    handleAvatarSuccess (res, file) {
      res = {
        code: 0,
        msg: '操作成功',
        url: 'https://t11.baidu.com/it/u=2080823458,604339149&fm=58'
      }
      console.log(file)
      if (res.code === 0) {
        this.form.icon = res.url
        this.$refs.form.validateField('icon')
      }
    },
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('ok')
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style>
.countToStyle{
     font-size: 40px;
    width: 200px;
    height: 100px;
    background-color: aliceblue;
    display: block;
    color: skyblue;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
    border-radius: 9px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-upload__input {
  display: none !important;
}
.el-icon-plus:before{
    display: none;
}
</style>
